<template>
  <div style="height: 1000px">

    <group>
      <x-switch v-model="show" title="触发"></x-switch>
      <x-switch v-model="show2" title="使用异步"></x-switch>
      <x-switch v-model="showToast" title="显示 toast"></x-switch>
      <x-switch v-model="showHideOnBlur" title="隐藏 on clicking mask"></x-switch>
      <x-switch v-model="showDialogStyle" title="触发" inline-desc="custom dialog style"></x-switch>
    </group>

    <div v-transfer-dom>
      <x-dialog v-model="showToast" class="dialog-demo">
        <div style="padding:15px;">
          <x-button @click.native="doShowToast" type="primary">show toast</x-button>
        </div>
        <div @click="showToast=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog-demo">
        <div class="img-box">
          <div style="background-color: green;max-width:100%;height:100%;"></div>
        </div>
        <div @click="show=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>

    <div v-transfer-dom>
      <x-dialog :show.sync="show2" class="dialog-demo">
        <div class="img-box">
          <div style="background-color: green;max-width:100%;height:100%;"></div>
        </div>
        <div @click="show2=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
        <div class="img-box">
          <div style="background-color: green;max-width:100%;height:100%;"></div>
        </div>
        <div @click="showHideOnBlur=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
        <p style="color:#fff;text-align:center;" @click="showDialogStyle = false">
          <span style="font-size:30px;">HELLO WORLD</span>
          <br>
          <br>
          <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
        </p>
      </x-dialog>
    </div>

    <group style="padding-top: 300px">
      <x-switch v-model="showScrollBox" :title="('long long content')"></x-switch>
    </group>

    <div v-transfer-dom    > 
        <x-dialog v-model="showScrollBox" class="dialog-demo"  >
          <p class="dialog-title">Long content</p>
          <div class="img-box" style="height:100px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;" >
            <p v-for="(i,index) in 20" :key="index">{{i}}</p>
          </div>
           <input type="" name="" value="" placeholder="请输入文本" style="outline:none; border:1px solid grey;width:100%;height:30px;"> 
           <button type="button" style="paddin:10px 20px;margin:10px;line-height:30px; ">确认</button>
          <div @click="showScrollBox=false">
            <span class="vux-close"></span>
          </div>
        </x-dialog>
      </div>

    <div v-transfer-dom>
      <x-dialog v-model="showScrollBox" class="dialog-demo">
        <p class="dialog-title">Long content</p>
        <div class="img-box" style="height:100px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
          <p v-for="(i,index) in 20" :key="index">{{i}}</p>
        </div>
        <!--<div @click="showScrollBox=false" @touchmove.self  @scroll.self>-->
        <input type="" name="" value="" placeholder="请输入文本" style="outline:none; border:1px solid grey;width:100%;height:30px;">
        <button type="button" style="paddin:10px 20px;margin:10px;line-height:30px; ">确认</button>
        <group>
          <x-switch v-model="showScrollBox2" title="触发" inline-desc="custom dialog style"></x-switch>
        </group>
        <x-dialog v-model="showScrollBox2" class="dialog-demo">
          <p class="dialog-title">showScrollBox2 Long content</p>

          <div class="img-box" style="height:100px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
            <p v-for="(i,index) in 20" :key="index">{{i}}</p>
          </div>
          <div @click="showScrollBox2=false">
              <span class="vux-close"> </span>
          </div>

        </x-dialog>

        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
    <router-link to="/home/comfirm" style="line-height:40px;text-align:center;display:inline-block;width:100%;  background-color:grey;    "><button style="outline:none;">to comfirm</button> </router-link>
  </div>
</template>



<script>
import { XDialog, XButton, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'


export default {
  directives: {
    TransferDom
  },
  components: {
    XDialog,
    XButton,
    Group,
    XSwitch
  },
  methods: {
    doShowToast() {
      this.$vux.toast.show({
        text: 'toast'
      })
    }
  },
  data() {
    return {
      show: false,
      show2: false,
      showToast: false,
      showHideOnBlur: false,
      showScrollBox: false,
      showDialogStyle: false,
      showScrollBox2:false
    }
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/close';

.dialog-demo {
  .weui-dialog {
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>